<template>
    <div>
        <el-button type="text" icon="el-icon-back" size="mini" @click="back">返回</el-button>
        <div class="tip">成员设置</div>
        <el-form ref="form" :model="greetingForm" label-width="80px">
            <el-form-item label="使用成员">
                <el-button type="primary" @click="selectMultipleMemberVisible = true">选择成员</el-button>
                <span class="spanFont">已选择{{ greetingForm.members.length }}</span>

                <el-dialog title="选择成员" :visible.sync="selectMultipleMemberVisible" width="60%" :close-on-click-modal="false" :destroy-on-close="true">
                    <MultipleSelect ref="selectMultipleMember" :listFields="listFields" :dataSource="memberList"/>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="selectMultipleMemberVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitMultipleMember">确 定</el-button>
                    </span>
                </el-dialog>
            </el-form-item>
            <el-form-item>
                <el-tag v-for="tag in greetingForm.members" :key="tag" closable style="margin-right: 10px"> {{ tag.name }}</el-tag>
            </el-form-item>
        </el-form>

        <div class="interspaceH"></div>

        <div class="tip">发送欢迎语</div>

        <el-input type="textarea" placeholder="请输入内容" v-model="greetingForm.sendContent" maxlength="1200" show-word-limit>
        </el-input>

        <el-upload
                class="upload-demo"
                ref="upload"
                action=""
                :file-list="greetingForm.fileList"
                :auto-upload="false">
            <el-button slot="trigger" type="text" icon="el-icon-circle-plus-outline">选择附件</el-button>
        </el-upload>

        <div class="button-strip">
            <el-button type="primary" @click="submit">提交</el-button>
            <el-divider direction="vertical" content-position="center"></el-divider>
            <el-button plain @click="back">返回</el-button>
        </div>
    </div>
</template>

<script>
import MultipleSelect from "@/components/list_multiple_select/list_multiple_select"
export default {
    name: "greeting_add",
    components: {
        MultipleSelect
    },
    data() {
        return {
            greetingForm: {
                members: [],
                sendContent: '',
                fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
            },
            selectMultipleMemberVisible: false,
            listFields: {
                name:'名称'
            },
            memberList:[]
        }
    },
    mounted() {
        let that = this
        for (let i = 0; i < 10; i++) {
            that.memberList.push(
                {
                    id: i,
                    name: '名称' + (i + 1)
                }
            )
        }
    },
    methods: {
        submit() {
            this.$refs.upload.submit();
            this.$emit("currentHandle", "list")
        },
        back() {
            this.$emit("currentHandle", "list")
        },
        submitMultipleMember() {
            let data = this.$refs.selectMultipleMember.getData();
            this.greetingForm.members = data
            this.selectMultipleMemberVisible = false
        }
    }
}
</script>

<style scoped>

</style>
